<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>

  </style>
</head>

<body>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <!-- <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3.2.31/dist/vue.esm-browser.js"
          // https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js
        }
      }
    </script> -->

  <!--
Here we show the simplest possible component which accepts a prop and renders it.
Learn more about components in the guide!
-->

  <script type="module">
    const ref = Vue.ref;
    const createApp = Vue.createApp;
    // import { createApp, ref } from 'vue'
    import TodoItem from './TodoItem.js'

    createApp({
      components: {
        TodoItem
      },
      setup() {
        const groceryList = ref([
          { id: 0, text: 'Vegetables' },
          { id: 1, text: 'Cheese' },
          { id: 2, text: 'Whatever else humans are supposed to eat' }
        ])

        return {
          groceryList
        }
      }
    }).mount('#app')
  </script>

  <div id="app">
    <ol>
      <!--
        We are providing each todo-item with the todo object
        it's representing, so that its content can be dynamic.
        We also need to provide each component with a "key",
        which is explained in the guide section on v-for.
      -->
      <todo-item v-for="item in groceryList" :todo="item" :key="item.id"></todo-item>
    </ol>
  </div>

</body>

</html>